

<!-- 售后退款-列表 -->
<template>
	<view class="all">
		
		<view class="list-pages" v-for="(item, index) of list" :key="index" v-on:click.stop="gotoDetail(item.returnId,'0')">
			<view class="code">
				<view class="left">
					售后单号：{{item.returnId}}
				</view>
				<!-- 售后状态 -->
				<view class="right" v-if="item.status === '0'">
					待店铺处理
				</view>
				<view class="right" v-if="item.status === '4'">
					<span v-if="item.returnType == '1'">待退款</span>
					<span v-if="item.returnType == '2'">待店铺收货</span> 
				</view>
				<view class="right" v-if="item.status === '1'">
					店铺已收货
				</view>
				<view class="right" style="color: #333333;" v-if="item.status === '2'">
					已完成
				</view>
				<view class="right" style="color: #333333;" v-if="item.status === '3'">
					已取消
				</view>
			</view>
			<view class="good-url">
				<image lazy-load="true" :src="imgSite + item.goodsBaseInfo.coverPicture"></image>
			</view>
			<view class="good-message">
				<view class="name ellipsis2">{{item.goodsBaseInfo.goodsName}}</view>
				<view class="size"><text v-for="i of JSON.parse(item.goodsBaseInfo.attributes.goodsCategoryAttr)" style="margin-right: 10rpx;">{{i.value}}</text> </view>
				<view class="num">
					<view class="left">
						<text style="color: #FE5E49;margin-right: 6rpx;" v-if="item.returnType == '1'">直接退款</text>
						<text style="color: #FE5E49;margin-right: 6rpx;" v-if="item.returnType == '2'">退货退款</text>
						<text>￥{{item.fixedPrice}}</text>
					</view>
				</view>
			</view>
			
			<!-- 地址 -->
			<view v-if="item.returnType == '2'" class="address-Container">
				<image class="addressIcon" :src="icon.addressIcon" mode=""></image>
				<view class="userInfo-Container">
					<view class="userInfo">
						<view class="userName ellipsis1">
							退货信息：<text>{{item.returnContractName}}</text>
						</view>
						<view class="phoneNumber">
							{{item.returnContractPhone}}
						</view>
					</view>
					<view class="addressInfo ellipsis2">
						{{item.returnAddress}}
					</view>
				</view>
			</view>
			
			<!-- 待退货状态底部按钮 -->
			<view style="display: flex;flex-direction: row-reverse;width: 100%;" v-if="((item.status === '1'||item.status === '4') && item.returnType == '2')">
				<view class="return-btn" v-if="!item.expressNumber&&item.status!='1'" v-on:click.stop="sendGoodsHandler(item.returnId,'0')">寄回商品</view>
				<view class="return-btn2" v-if="item.expressNumber" v-on:click.stop="sendGoodsHandler(item.returnId,'1')">修改物流</view>
				<view class="return-btn2" v-if="item.expressNumber" v-on:click.stop="logistical(item.returnId,item.orderId)">查看物流</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		props: {
			list: {
				type: null,
				default: ''
			},
			index: {
				type: null,
				default: ''
			},
		},
		data() {
			return {
				icon: {
					addressIcon: "/static/images/afterSale/addSale/addressIcon.png"
				},
			}
		},
		computed: {
			...mapState(['imgSite'])
		},
		methods: {
			// 跳转详情
			gotoDetail: function(returnId) {
				uni.navigateTo({
					url: '/pagesGoods/afterSale/afterSaleDetail?returnId='+returnId
				});
			},
			// 售后详情
			toAddSale:function(){
				uni.navigateTo({
					url: '/pagesGoods/afterSale/addSale'
				});
			},
			//寄回商品
			sendGoodsHandler(returnId,type) {
				uni.navigateTo({
					url: '/pagesGoods/afterSale/sendGood?returnId='+returnId+'&type='+type
				})
			},
			
			
			//售后详情
			logistical(returnId,orderId) {
				uni.navigateTo({
					url: '/pagesOrder/logistical?returnId='+returnId+'&type=return&orderId='+orderId
				})
			}
		}
	}
</script>

<style lang="scss">
	.all {
			
				
				
		}
	.list-pages {
		padding-left: 30rpx;
		padding-right: 34rpx;
		background-color: white;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 750rpx;
		border-radius: 16rpx;
		.code{
			width: 690rpx;
			height: 78rpx;
			border-bottom: 1rpx solid #eee;
			margin-bottom: 28rpx;
			display: flex;
			align-items: center;
			.left{
				width: 60%;
				color: #333333;
				font-size: 24rpx;
				white-space: nowrap;
			}
			.right{
				width: 40%;
				text-align: right;
				color: #FE5E49;
				font-size: 24rpx;
			}
		}
		.good-url {
			width: 196rpx;
			height: 194rpx;

			image {
				width: 170rpx;
				height: 170rpx;
			}
		}
		.good-message {
			display: flex;
			flex-direction: column;
			width: 490rpx;
			height: 170rpx;
			
			.name {
				font-size: 24rpx;
				color: #333333;
				line-height: 34rpx;
			}

			.size {
				color: #999999;
				font-size: 19rpx;
				margin-top: auto;
			}

			.num {
				width: 100%;
				display: flex;
				margin-top: 18rpx;

				.left {
					width: 80%;
					color: #333333;
					font-size: 24rpx;
					// font-weight: bold;
				}
			}

			.after-sale {
				margin-top: 34rpx;
				font-size: 18rpx;
				display: flex;
				color: #999999;
				flex-direction: row-reverse;
				.before{
					color: #E01327;
					width: 150rpx;
					height: 54rpx;
					border:1rpx solid #E01327;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 27rpx;
				}
				.applying{
					color: #666666;
					width: 150rpx;
					height: 54rpx;
					background: #F5F5F5;
					border:1rpx solid #eee;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 27rpx;
				}
			}
		}

	}
	
	// 地址信息
	.address-Container {
		margin-top: 26rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 50rpx 20rpx 20rpx;
		width:690rpx;
		height:131rpx;
		background:rgba(245,245,245,1);
		border-radius:10rpx;
		
		.addressIcon {
			width: 28rpx;
			height: 33rpx;
		}
		
		.userInfo-Container {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			width: 570rpx;
			font-size:22rpx;
			font-family:PingFang SC;
			color:rgba(102,102,102,1);
			
			.userInfo {
				display: flex;
				justify-content: space-between;
				width: 100%;
				
				.userName {
					max-width: 400rpx;
				}
				
				.phoneNumber {
					margin-left: auto;
				}
			}
			
			.addressInfo {
				margin-top: 10rpx;
			}
		}
	}
	
	.return-btn{
		margin-bottom: 30rpx;
		width: 148rpx;
		height: 52rpx;
		color: #E01327;
		border: 1rpx solid #E01327;
		border-radius: 26rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.return-btn2{
		margin-bottom: 30rpx;
		width: 148rpx;
		height: 52rpx;
		color: #666666;
		border: 1rpx solid #ADADAD;
		border-radius: 26rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}
</style>
